import './searchResultCard.css'
import { RightOutlined, LeftOutlined } from '@ant-design/icons'
import Avatar from './Avatar'
import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { arrayHelper } from '@/utils/common'

function ItemInfo ({
    label,
    value,
}) {

    if (typeof label === 'string' && typeof value === 'string') {
        if (label === '姓名') {
            return (
                <div className='text-sm'>
                    <label className="after:content-[':'] mr-[0.5em]">{label}</label>
                    <span className='text-red-500'>{value}</span>
                </div>
            )
        } else {
            return (
                <div className='text-sm'>
                    <label className="after:content-[':'] mr-[0.5em]">{label}</label>
                    <span>{value}</span>
                </div>
            )
        }
    }

    if (typeof label === 'string' && Array.isArray(value)) {
        return (
            <div className='text-sm'>
                <label className="after:content-[':']">{label}</label>
                {
                    value.map((item, index) => {
                        return (
                            <span key={index} className="ml-[0.5em]">
                                {item}
                            </span>
                        )
                    })
                }
            </div>
        )
    }

    return null
}

function TagContainer ({ type, tagList, url, name }) {

    const router = useRouter()

    if (type === 'graph' && typeof name === 'string') {
        return (
            <div className='flex items-center gap-3'>
                <div 
                    className='text-sm px-2 bg-gray-200 text-primary rounded cursor-pointer'
                    onClick={() => (router.push(`/association-graph/${url}?name=${name}&tab=graph&graph=people2thing`))}
                >
                    <span>人事图谱</span>
                </div>
                <div 
                    className='text-sm px-2 bg-gray-200 text-primary rounded cursor-pointer'
                    onClick={() => (router.push(`/association-graph/${url}?name=${name}&tab=graph&graph=people2people`))}
                >
                    <span>人人图谱</span>
                </div>
                <div 
                    className='text-sm px-2 bg-gray-200 text-primary rounded cursor-pointer'
                    onClick={() => (router.push(`/association-graph/${url}?name=${name}&tab=graph&graph=all`))}
                >
                    <span>综合图谱</span>
                </div>
            </div>
        )
    }

    if (type === 'tag' && Array.isArray(tagList)) {
        return (
            <div className='flex items-center gap-3'>
                {tagList.map(({ name }, index) => {
                    return (
                        <div key={index} className='text-sm px-2 bg-gray-200 rounded'>
                            <span>{name}</span>
                        </div>
                    )
                })}
            </div>
        )
    }

    return null
}

function ConnectionContainer ({ list }) {

    const [length, setLength] = useState(() => (0))

    const [currentList, setCurrentList] = useState(() => ([]))
    const [firstIndex, setFirstIndex] = useState(() => (0))
    const [lastIndex, setLastIndex] = useState(() => (8))

    const handleRightClick = () => {
        const currentLastIndex = lastIndex + 1
        const currentFirstIndex = firstIndex + 1
        
        setFirstIndex(() => (currentFirstIndex))
        setLastIndex(() => (currentLastIndex))
        setCurrentList(() => (list.slice(currentFirstIndex, currentLastIndex + 1)))
    }

    const handleLeftClick = () => {
        const currentLastIndex = lastIndex - 1
        const currentFirstIndex = firstIndex - 1

        setFirstIndex(() => (currentFirstIndex))
        setLastIndex(() => (currentLastIndex))
        setCurrentList(() => (list.slice(currentFirstIndex, currentLastIndex + 1)))
    }

    useEffect(() => {
        if (Array.isArray(list)) {
            setLength(() => (list.length))
            setCurrentList(() => (list.slice(0, 9)))
        }
    }, [list])

    return (
        <div className='flex m-3'>
            {
                firstIndex > 0
                    ? (
                        <LeftOutlined 
                            className='cursor-pointer mb-8 text' 
                            onClick={handleLeftClick}
                            style={{ color: 'rgb(203 213 225)' }}
                        />
                    )
                    : (
                        null
                    )
            }
            {currentList.map(({ name, url, avatarUrl, note }, index) => {
                return (
                    <div key={index} className='flex'>
                        <Avatar 
                            size={50} 
                            name={name} 
                            url={url} 
                            avatarUrl={avatarUrl} 
                            note={note}
                        />
                        {index < currentList.length - 1
                            ? (
                                <div className='border-[0.5px] border-slate-300 border-solid w-6 h-0 mt-6' />
                            )
                            : null
                        }
                    </div>
                )
            })}
            {
                lastIndex < length - 1
                    ? (
                        <RightOutlined 
                            className='cursor-pointer mb-8' 
                            onClick={handleRightClick}
                            style={{ color: 'rgb(203 213 225)' }}
                        />
                    )
                    : (
                        null
                    )
            }
        </div>
    )
}

export default function SearchResultCard({
    name,
    age,
    ethnic,
    placeOfRegion,
    idNumber,
    url,
    educationalBackground,
    gender,
    phoneList,
    tagList,
    connectionList,
    avatarUrl,
}) {
    return (
        <div className="w-[890px] py-4 px-3 shadow-md search-detail-container">
            <div>
                <a className="text-blue-600 visited:text-purple-600 no-underline hover:underline underline-offset-2 cursor-pointer" href={`/association-graph/${url}?name=${name}&tab=profile`}>
                    <span className="text-red-500">
                        {name}
                    </span>
                    <span className="">
                        --
                    </span>
                    <span>
                        纠纷人物画像
                    </span>
                </a>
            </div>
            <div className="m-2 detail-card" style={{ gridTemplateRows: arrayHelper(connectionList).length > 0 ? '100px 100px' : '100px' }}>
                <div className='avatar-container'>
                    <Avatar size={100} avatarUrl={avatarUrl} />
                </div>
                <div className='id-container'>
                    <div className='name-container'>
                        <ItemInfo label='姓名' value={name ?? '--'} />
                    </div>
                    <div className='age-container'>
                        <ItemInfo label='年龄' value={age ?? '--'} />
                    </div>
                    <div className='ethnic-container'>
                        <ItemInfo label='民族' value={ethnic ?? '--'} />
                    </div>
                    <div className='place_of_region-container'>
                        <ItemInfo label='籍贯' value={placeOfRegion ?? '--'} />
                    </div>
                    <div className='id_number-container'>
                        <ItemInfo label='身份证号' value={idNumber ?? '--'} />
                    </div>
                    <div className='tag-container'>
                        <TagContainer type='graph' name={name} url={url}/>
                    </div>
                </div>
                <div className='info-container'>
                    <div className='educational_background-container'>
                        <ItemInfo label='学历' value={educationalBackground ?? '--'} />
                    </div>
                    <div className='occupation-container'>
                        <ItemInfo label='性别' value={gender ?? '--'} />
                    </div>
                    <div className='phone_number-container'>
                        <ItemInfo 
                            label='手机号' 
                            value={phoneList ?? '--'}
                        />
                    </div>
                    <div className='tag-container'>
                        <TagContainer
                            type='tag'
                            tagList={tagList}
                        />
                    </div>
                </div>
                {
                    arrayHelper(connectionList).length > 0
                        ? (
                            <div className='connection-container'>
                                <ConnectionContainer list={connectionList}/>
                            </div>
                        )
                        : null
                }
            </div>
        </div>
    )
}